<template>
    <div>
        <div style="height: 4rem; margin-top: 3rem;">
            <div>
                <el-button type="success" style="height: 4rem; margin-left: 2rem;" @click="yidu">标为已读</el-button>
                <el-button type="danger" style="float: right; ">删除</el-button>
            </div>
        </div>

        <div class="tabel_ti">
            <!-- <div>
                <el-table :data="tableData" style="width: 100%">
                <el-table-column property="id" label="" width="50" />
                <el-table-column type="selection" width="55" />
                <el-table-column property="lei" width="120" label="类型" />
                <el-table-column property="nei" width="800" label="信息内容" />
                <el-table-column property="time" label="时间" />
                {{ 
                
                }}

                <el-table-column property='zhuang' label="状态" />
            </el-table>
            </div> -->
            
            <table class="table_1" cellspacing="0" cellpadding="1">
                <tr>
                    <th></th>
                    <th>
                        <input type="checkbox" @click="quanxuan" :checked="check1">
                    </th>
                    <th>类型</th>
                    <th>信息内容</th>
                    <th>时间</th>
                    <th>状态</th>
                </tr>
                <tr v-for="(item, index) in data" :key="index">
                    <td style="color: black;">{{ item.id }}</td>
                    <td>
                        <input type="checkbox" :checked='item.flag' @click="danxuan(item, id)">
                    </td>
                    <td>{{ item.lei }}</td>
                    <td>{{ item.nei }}</td>
                    <td>{{ item.time }}</td>
                    <td>{{ item.zhuang ? '已读' : '未读'}}</td>

                </tr>

            </table>
        </div>

    </div>
</template>

<script   setup>
import { ref, unref, watch } from 'vue'
import { ElTable } from 'element-plus'
const data = ref([
{ id: 1, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 2, lei: '文档', flag: false, nei: '管理员在“公共文档区”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 3, lei: '文档', flag: false, nei: '管理员在“公共文档区”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 4, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 5, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 6, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 7, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 8, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 9, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
{ id: 10, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
])
const check = ref([])
const check1 = ref(false)


// interface User {
//   id: Number
//   lei: string
//   flag: boolean
//   nei: string
//   time: string
//   zhuang: boolean
// }
// const tableData: User[] = [
// { id: 1, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 2, lei: '文档', flag: false, nei: '管理员在“公共文档区”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 3, lei: '文档', flag: false, nei: '管理员在“公共文档区”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 4, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 5, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 6, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 7, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 8, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 9, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// { id: 10, lei: '文档', flag: false, nei: '管理员在“智企科技开发团队”上传了文件“gsc.jpg”', time: '2024-07-27 19:35:59', zhuang: false },
// ]


// 已读
const yidu = () => {
    if (check.value.length > 0) {
        check.value.forEach(item => {
            item.zhuang = !item.zhuang
        })
    }

}


//全选
const quanxuan = () => {
    check1.value = !check1.value
    data.value.forEach(item => {
        item.flag = check1.value
        if (item.flag) {
            check.value.push(item)
        } else {
            check.value = check.value.filter(i => i.id !== item.id)
        }
    })
}
//单选
const danxuan = (item) => {
    item.flag = !item.flag
    if (item.flag === true) {
        check.value.push(item)
    } else {
        check.value = check.value.filter(i => i.id !== item.id)
    }
}


watch(data.value, (newVal, oldVal) => {
    check1.value = newVal.every(item => {
        return item.flag === true
    })

})

</script>
<style scoped>
.tabel_ti {
    width: 160rem;
    margin-top: 3rem;
    margin-left: 2rem;
    background: #f9f9f9;

}
.table_1{
    border: 1px solid rgb(193, 193, 193);
}
.tabel_ti table {
    width: 100%;

}

.tabel_ti table th {
    height: 4rem;
    font-size: 2rem;
    border: 1px solid rgb(193, 193, 193);
    
}

.tabel_ti table td {
    font-size: 2rem;
    text-align: center;
    line-height: 4.6rem;
    border: 1px solid rgb(193, 193, 193);
    color: rgb(133, 133, 133);
}
</style>